<template>
  <div>
    <audio id="player" controls autoplay></audio>
    <button id="btn-start-recording" @click="startRecording">录音</button>
    <button id="btn-stop-recording" @click="stopRecording">停止</button>
    <button id="btn-play-recording" @click="getRecording">获取文件</button>
  </div>
</template>
<script>
  import axios from 'axios'
  import { Recorder } from './recorder'
  var recorder = null
  export default {
    name: 'Audio',
    data: function () {
      return {
        area: 'province',
        recorder: null,
        temp: null
      }
    },
    methods: {
      startRecording: function () {
        Recorder.get(function (rec) {
          recorder = rec
          recorder.start()
        })
      },
      stopRecording: function () {
        alert("stop")
        recorder.stop()

      },
      getRecording: function () {
        let audioFile = recorder.getBlob()  //得到需要的pcm文件

        let formData = new FormData()
        formData.append('file', audioFile)

        axios({
          method: 'post',
          url: 'http://127.0.0.1:8100/resolveAudio',
          data: formData,
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }).then(res => {
          console.log("语音发送成功")
        })
        console.log(formData)
      },
      beforeDestroy () {
        if (recorder !== null) {
          recorder.stop()
          recorder = null
        }
      }
    }}
</script>
